<script setup lang="ts">
import { VbenCountToAnimator } from '@vben/common-ui';

import { Card } from 'ant-design-vue';

import Icon from '#/components/Icons';

interface Props {
  items: any;
}

defineOptions({
  name: 'AnalysisOverview',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
defineEmits(['click']);
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
    <template v-for="item in items" :key="item.title">
      <Card
        :body-style="{
          borderBottom: 'none',
        }"
        :bordered="false"
        :head-style="{
          borderBottom: 'none',
        }"
        class="w-full"
        hoverable
        @click="$emit('click', item)"
      >
        <template #title>
          <span class="text-xl">{{ item.title }}</span>
        </template>

        <div class="flex items-center justify-between">
          <VbenCountToAnimator
            :end-val="item.value"
            :start-val="1"
            class="text-xl"
            prefix=""
          />
          <Icon
            :color="item.color"
            :icon="item.icon"
            class="size-8 flex-shrink-0"
          />
        </div>
        <div class="mt-7 flex justify-between">
          <span>{{ item.totalTitle }}</span>
          <VbenCountToAnimator
            :end-val="item.totalValue"
            :start-val="1"
            prefix=""
          />
        </div>
      </Card>
    </template>
  </div>
</template>
